<template>
  <el-dialog
    v-if="open"
    class="dia-style"
    title="判定"
    :visible.sync="open"
    width="70%"
    :close-on-click-modal="false"
    @close="cancel"
  >
    <div class="warning-content">
      <p><i class="el-icon-warning" />属性不一致可能的业务场景：</p>
      <p>1、IP地址变化：终端所属责任人更换办公室；</p>
      <p>2、密级变化：设备使用用途发生变化，比如普通机器安装防护软件后纳入涉密管理；</p>
      <p>3、责任人及责任部门变化：人员调岗、设备被借用；</p>
      <p>4、使用状态变化：设备报废入库、设备丢失；</p>
    </div>
    <div style="margin-top: 20px; text-align: right">
      <!-- <el-checkbox v-model="checked" @change="handleCheckbox">仅展示不一致情形</el-checkbox> -->
    </div>
    <div class="list-box">
      <hk-table
        ref="tableRef"
        :loading="loading"
        :table-data="tableData"
        :table-columns="tableList"
        :show-index="true"
        :dict-list="dictList"
        :total="total"
        :common-fixed="true"
        :query-params="queryParams"
      >
        <!-- 是否一致 -->
        <template #attributeValue="scope">
          <span>{{ scope.row.attributeValue == false ? '不一致' : '一致' }}</span>
        </template>
        <!-- 比较属性 -->
        <template #attributeName="scope">
          <span>{{ attributeList[scope.row.attributeName] }}</span>
        </template>
        <template #result="scope">
          <el-input v-if="scope.row.isSame != 1" v-model="scope.row.result" />
          <span v-else>{{ scope.row.tern }}</span>
        </template>
      </hk-table>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">保存</el-button>
      <el-button @click="cancel">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { inconsistentById, determine } from '@/api/assets/assetsComparison.js'

import HkTable from '@/components/Hk-Table/index.vue'
export default {
  components: { HkTable },
  data() {
    return {
      open: false,
      loading: false,
      tableData: [],
      tableList: [
        { label: '设备唯一标识', param: 'mac' },
        { label: '比较属性', param: 'attributeName', type: 'slot' },
        { label: '是否一致', param: 'attributeValue', type: 'slot' },
        { label: '当前平台', param: 'basicData' },
        { label: '监测器平台', param: 'detectorData' },
        { label: '三合一平台', param: 't3in1Data' },
        // { label: '判定结果', param: 'determineResult', type: 'slot' }
        { label: '判定结果', param: 'determineResult', type: 'select', list: 'resultList' }
      ],
      dictList: {
        //  判定结果
        resultList: [
          {
            value: 'basic',
            label: 'ZJG平台'
          },
          {
            value: 'detector',
            label: '监测器平台'
          },
          {
            value: '3in1',
            label: '三合一平台'
          }
        ]
      },
      queryParams: {
        current: 1,
        size: 10
      },
      total: 0,
      checked: true,
      defaultTableData: [],
      attributeList: {
        ipAgr: 'IP地址',
        userAgr: '责任人',
        orgAgr: '责任部门',
        secrecyLevel: '密级' }
    }
  },
  mounted() {
    this.handleCheckbox(this.checked)
  },
  methods: {
    show(id) {
      inconsistentById({ id: id }, this.queryParams).then((res) => {
        this.total = res?.length
        this.tableData = res
        this.defaultTableData = res
        this.loading = false
      })
      //  更改id
      this.defaultTableData.forEach((i, index) => {
        this.defaultTableData[index].id = id
      })
      this.checked = true
      this.handleCheckbox(this.checked)
      this.open = true
    },
    cancel() {
      this.open = false
      this.$emit('handleSubmit')
    },
    handleSave() {
      const resultData = this.tableData.map((i) => {
        return {
          id: i.id,
          attributeName: i.attributeName,
          determineResult: i.determineResult
        }
      })
      determine({ resultData: resultData }).then((res) => {
        this.$message.success('判定成功')
        this.$emit('handleSubmit')
        this.open = false
      })
    },
    // 多选框
    handleCheckbox(value) {
      if (value) {
        this.tableData = this.tableData.filter((i) => {
          return i.attributeValue === false
        })
      } else {
        this.tableData = this.defaultTableData
        this.total = this.tableData.length
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.list-box {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: auto;
  width: 100%;
}
::v-deep .el-dialog .el-dialog__body {
  height: 800px !important;
}
.dark-theme .warning-content {
  border: 1px solid #00e3e4 !important;
  background: transparent !important;
}
.warning-content {
  background: #eef1ff;
  border: 1px solid #4b6eef;
  padding: 10px 20px;
  // font-weight: bold;
  i {
    font-size: 18px;
    margin-right: 10px;
    color: #4b6eef;
  }
}
.btn {
  text-align: right;
  padding-top: 20px;
}
</style>
